<template>
  <draggable
    class="content-center"
    :list="dragList"
    :group="{ name: 'dragGroup', pull: false, put: true }"
    itemKey="id"
  >
    <template #item="{ element }">
      <div
        :class="['component-contener', activeId == element.id ? 'active' : '']"
      >
        <component
          class="fdv-component"
          :mode="COMPONENTMODES.DESIGN"
          :is="element.component"
        ></component>
      </div>
    </template>
  </draggable>
</template>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { ref, reactive, defineComponent, watch } from "vue";
import allComponents from "@/components/fdvComponents/index.ts";
import { COMPONENTMODES } from "@/utils/constEnums";
import { Schema } from "@/types/custom";
import { useDragStore } from "@/stores/useDefaultStore.ts";
defineComponent({
  components: { ...allComponents },
});
const dragList = reactive<Array<Schema>>([]);
const dragStore = useDragStore();
const activeId = storeToRefs(dragStore).activeId;
const activeObj = ref<Schema | null>(null);
watch(
  () => activeId,
  (val) => {
    dragList.forEach((schema) => {
      if (schema.id == val.value) {
        activeObj.value = schema;
        dragStore.setActiveObj(activeObj.value);
      }
    });
  },
  {
    deep: true,
  }
);
</script>
<style lang="less" scoped>
.content-center {
  height: calc(100% - 20px);
  margin: 10px;
  padding: 4px;
  background-color: #fff;
  .component-contener {
    &.active {
      .fdv-component {
        border: 2px solid #409eff;
      }
    }
  }
}
</style>
